<template>
  <div>
    <el-table
      :data="list"
      style="width: 100%;" v-loading="loading">
      <el-table-column
        label="Id"
        width="80">
        <template slot-scope="scope">
          {{scope.row.u_id}}
        </template>
      </el-table-column>
      <el-table-column
        label="用户名称"
        width="210">
        <template slot-scope="scope">
          {{scope.row.u_user}}
        </template>
      </el-table-column>
      <el-table-column
        label="用户头像"
        width="250">
        <template slot-scope="scope">
          <img width="50" :src="scope.row.u_icon"/>
        </template>
      </el-table-column>
      <el-table-column
        label="用户号码"
        width="250">
        <template slot-scope="scope">
          {{scope.row.u_tel}}
        </template>
      </el-table-column>
      <el-table-column
        label="用户余额"
        width="150">
        <template slot-scope="scope">
          {{scope.row.u_money}} 元
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="resetPass(scope.row.u_id,scope.row.u_user)">重置密码</el-button>
          <el-button type="primary" size="small" @click="moneySet(scope.row.u_id,scope.row.u_money)">余额操作</el-button>
          <el-button type="danger" size="small" @click="dele(scope.row.u_id)">删除用户</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="height:20px;"></div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="length"
      :current-page="page"
      @current-change="setPage"
      class="page"
    >
    </el-pagination>

    <el-dialog title="余额操作" :before-close="handClose" :visible.sync="money_show" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm" v-if="money_show" style="width: 330px;">
        <el-form-item label="用户余额:">
          <span style="color:#FF6700">{{money_xz}}</span> 元
        </el-form-item>
        <el-form-item label="操作类型:" prop="type">
          <el-select v-model="form.type" placeholder="请选择操作类型">
            <el-option label="充值" :value="1"></el-option>
            <el-option label="扣除" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作余额" prop="money">
          <el-input v-model="form.money" autocomplete="off" placeholder="请输入操作金额"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="money_show">
        <el-button @click="money_show = false">取 消</el-button>
        <el-button type="primary" @click="onSub('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        page:1,
        length:0,
        count:0,
        loading:true,
        list:null,
        money_show:false,
        money_xz:null,
        form:{
          money:null,
          type:null,
          id:null
        },
        rules:{
          money:[
            { required: true, message: '请输入操作金额', trigger: 'blur' },
            { min: 1, message: '请输入操作金额', trigger: 'blur' }
          ],
          type:[
            { required: true, message: '请选择操作类型', trigger: 'blur' }
          ]
        }
      }
    },methods:{
      onLoad:function(page=1){
        var that=this

        this.$axios.post('/admin.php/user/show',this.$qs.stringify({page:page})).then(
          (res)=>{
            if(res.data.code==1){
              that.loading=false;
              that.page=res.data.data.page;
              that.length=res.data.data.length;
              that.count=res.data.data.count;
              that.list=res.data.data.list;

              that.$notify({
                title: '成功',
                message: '加载成功',
                type: 'success'
              });
            }else{
              that.loading=false;
              that.list=null;

              that.$notify.info({
                title: '消息',
                message: res.data.msg
              });
            }
          }
        ).catch(
          (res)=>{
            that.$notify({
              title: '警告',
              message: '网络繁忙',
              type: 'warning'
            });
          }
        )
      },
      setPage:function(page){
        this.onLoad(page);
      },
      resetPass:function(id,name){
        this.$prompt('请输入新密码', '重置'+name+'密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '请输入新密码'
        }).then(({ value }) => {
          if(value==''){
            return this.$message.error('请输入新密码');
          }
          var that=this
          this.$axios.post('/admin.php/user/reset_btn',this.$qs.stringify({id:id,pass:value})).then(
            (res)=>{
              if(res.data.code==1){
                that.onLoad();

                that.$message({
                  type:'success',
                  message:'操作成功'
                })
              }else{
                that.$message({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            }
          ).catch(
            (res)=>{
              that.$message.error('网络繁忙');
            }
          )
        }).catch(() => {
        });
      },
      dele:function(id){
        this.$confirm('此操作将永久删除该景点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that=this;

          this.$axios.post('/admin.php/scenic/dele_btn',this.$qs.stringify({id:id})).then(
            (res)=>{
              if(res.data.code==1){
                that.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                that.onLoad();
              }else{
                that.$message({
                  type: 'success',
                  message: res.data.msg
                });
              }
            }
          ).catch(
            (res)=>{
              that.$message({
                type: 'warning',
                message: '网络繁忙'
              });
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      moneySet:function(id,money){
        this.form.id=id;

        this.money_show=true

        this.money_xz=money
      },
      onSub:function(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var that=this
            this.$axios.post('/admin.php/user/money_btn',this.$qs.stringify(this.form)).then(
              (res)=>{
                if(res.data.code==1){
                  that.onLoad();
                  that.money_show=null;
                  that.money_xz=null;
                  that.$message({
                    type: 'successs',
                    message: '操作成功'
                  });
                }else{
                  that.$message({
                    type: 'warning',
                    message: res.data.msg
                  });
                }
              }
            ).catch(
              (res)=>{
                that.$message.error('网络繁忙');
              }
            )
          } else {
            return false;
          }
        });
      },
      handClose:function(){
        this.money_show=false
      }
    },created(){
      this.onLoad();
    }
  }
</script>

<style>
  .el-table table tr th{
    text-align: center;
  }
  .el-table table tr .cell{
    text-align: center;
  }
  .btn{
    margin:10px 0;
  }
</style>
